import React, { PureComponent } from 'react'
import { StyleSheet, View, Image, Text, ImageBackground, FlatList, TouchableOpacity, Modal, } from 'react-native'
import DiscountCouponIssueItem from './DiscountCouponIssueItem'
import { screen, system } from '../../common'
type Props = {
    show: boolean,
}
type State = {
    showView: boolean,
}


const DiscountCouponIssueInfo = [
    { price: '3', uselimit: '无限制', title: '优惠券标题', endusetime: '2018.12.31' },
    { price: '5', uselimit: '无限制', title: '优惠券标题', endusetime: '2018.12.31' },
    { price: '10', uselimit: '无限制', title: '优惠券标题', endusetime: '2018.12.31' },
    { price: '15', uselimit: '满50元可用', title: '优惠券标题', endusetime: '2018.12.31' },
    { price: '50', uselimit: '满100元可用', title: '优惠券标题', endusetime: '2018.12.31' },
]

class DiscountCouponIssue extends PureComponent<Props, State>{

    constructor(props: Object) {
        super(props)

        this.state = {
            showView: false
        }
    }



    renderModal = (info: Object) => {
        return (
            <DiscountCouponIssueItem
                info={info.item}
            />
        )
    }
    //更改showView的值
    _setModalVisible() {
        let isShow = this.state.showView;
        this.setState({
            showView: !isShow,
        })

    }

    render() {
        //控制是否显示
        let isShowView = this.state.showView != this.props.show

        return (
            <Modal
                animationType='slide'
                transparent={true}
                visible={isShowView}
                onShow={() => { }}
                onRequestClose={() => { }} >
                {/*整个弹框的样式：包括可见和不可见的部分*/}
                <View style={styles.modalStyle}>
                    {/*弹框可见部分的样式*/}
                    <View style={styles.subMadalView}>
                        <Text style={styles.titleStyle}>
                            恭喜您成为迪信优品店主
                       </Text>
                        <Text style={styles.subtitleStyle}>
                            小小心意，敬请笑纳
                       </Text>
                        <View style={styles.listStyle}>
                            <FlatList
                                data={DiscountCouponIssueInfo}
                                renderItem={this.renderModal}
                            />
                            <View flex={1} />
                        </View>
                        <View flex={1} />
                        <View style={{ marginBottom: screen.height / 40, width: screen.width * 0.8, height: 3, backgroundColor: 'white' }}></View>
                        <TouchableOpacity
                            style={styles.buttonStyle}
                            onPress={() => {

                                this._setModalVisible()

                            }}
                        >
                            <Text style={styles.buttonTextStyle}>知道了</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        )
    }
}
const styles = StyleSheet.create({
    // modal的样式  
    modalStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    },
    // modal上子View的样式  
    subMadalView: {

        // marginLeft: 80,
        // marginRight: 80,
        backgroundColor: 'red',
        // alignSelf: 'stretch',
        // justifyContent: 'center',
        borderRadius: 10,
        // borderWidth: 0.5,
        // borderColor: '#ccc',
        alignItems: 'center',
        height: screen.height / 2.8,
        width: screen.width * 0.8
    },
    titleStyle: {
        // alignItems: 'center',
        // justifyContent: 'center',
        // height: 80,
        marginBottom: screen.height / 60,
        marginTop: screen.height / 30,
        color: 'white',
        fontWeight: 'bold',
        fontSize: 25,
    },
    // 副标题  
    subtitleStyle: {
        fontSize: 20,
        // textAlign: 'center',
        // color: 'white',
        // fontWeight: 'bold',
        marginBottom: screen.height / 60,
        color: 'black',

    },
    listStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        height: screen.height / 8,
        width: screen.width * 0.7
    },
    buttonStyle: {
        // width: screen.width - 240,
        // height: 50,
        // borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'red',
        marginBottom: screen.height / 40,
    },
    buttonTextStyle: {
        fontSize: 20,
        color: 'white',
        // textAlign: 'center',
    },
})
export default DiscountCouponIssue